<template>
  <div>
    <t-dialog
      width="auto"
      class="dialog"
      placement="center"
      :header="false"
      :footer="false"
      :closeBtn="false"
      :visible.sync="visible"
      :close-on-overlay-click="false"
    >
      <div class="dialog-body">
        <div class="left">
          <div class="drawer-head">
            <h3>{{header}}</h3>
          </div>

          <div class="product-info">
            <h3>{{ row.title }}</h3>
            <p v-if="row.is_sn">SN: {{ row.sn }}</p>
          </div>

          <t-form :data="formData" :rules="rules" ref="form" layout="inline" label-align="top" @submit="onSubmit">
            <t-form-item name="unit_price" style="width: 168px;margin-right: 18px;">
              <template #label>
                <p class="form-label2">出库价</p>
              </template>
              <t-input label="￥" v-model="formData.unit_price" placeholder="0.00"></t-input>
            </t-form-item>
            <t-form-item name="quantity" style="width: 168px;margin-right: 18px;">
              <template #label>
                <p class="form-label2">数量</p>
              </template>
              <t-input-number v-model="formData.quantity" :min="1" :max="formData.max_quantity" @change="changeQuantity" placeholder="请输入"></t-input-number>
            </t-form-item>
            <t-form-item name="remark" style="width: 100%;margin-right: 0;">
              <template #label>
                <p class="form-label2">备注</p>
              </template>
              <t-textarea v-model="formData.remark" :maxlength="50" placeholder="请输入备注" />
            </t-form-item>
          </t-form>
          <div class="footer-btn">
            <div>
              <t-button theme="danger" v-if="type === 'again'" variant="outline" class="danger-btn" @click="cancelWarehousing">取消出库</t-button>
            </div>
            <t-space size="8px">
              <t-button theme="primary" class="" @click="confirmWarehousing">确定</t-button>
              <t-button theme="default" class="" @click="close">取消</t-button>
            </t-space>
          </div>
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script>
import { IconFont } from "tdesign-icons-vue";
import {classifyListApi} from "@/api/classify";
import ConfigRight from "@/pages/warehouse/components/product-warehousing/config-right.vue";

export default {
  name: 'ConfigInfo',
  components: {ConfigRight, IconFont},
  data() {
    return {
      visible: false,
      header: '填写出库信息',
      confirmBtn: {
        text: '保存',
        theme: 'primary',
        loading: false
      },
      row: {},
      formData: {
        product_id: '', // 产品ID
        unit_id: '',  // 单位ID
        quantity: '', // 数量
        max_quantity: 0, // 最大数
        is_sn: 1, // 开启SN序列号（0关闭；1开启）
        sn: '', // SN数据
        unit_price: '', // 含税单价（进货价）
        remark: '', // 备注（50个字内）
      },
      rules: {
        unit_price: [{ required: true, message: '请输入出库价', trigger: 'blur' }],
        unit_id: [{ required: true, message: '请选择单位', trigger: 'change' }],
        quantity: [
          { required: true, message: '请输入数量', trigger: 'change' },
          { min: 1, message: '数量必须大于0', trigger: 'change' }
        ],
      },
      unitOptions: [],
      switchValue: true,
      type: 'first',
      status: '', // 状态 config: 配置 outbound 出库

      productId: '',
    }
  },
  methods: {
    changeQuantity(value) {
      setTimeout(()=> {
        if (value < 1) {
          this.formData.quantity = 1
        } else if (value > this.formData.max_quantity) {
          this.formData.quantity = this.formData.max_quantity
        } else {
          this.formData.quantity = value
        }
      }, 100)
    },
    // 取消出库
    cancelWarehousing() {
      this.$emit('cancel', this.formData)
      this.close();
    },
    // 确认出库
    confirmWarehousing() {
      this.$refs.form.submit()
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        this.$emit('confirm', this.formData)
        this.close();
      } else {
        this.$message.error(firstError);
      }
    },
    open(row) {
      console.log('row', row)
      this.row = row
      this.visible = true
      this.productId = row.product_id
      this.formData = {
        id: row.id,
        title: row.title,
        product_id: this.productId, // 产品ID
        unit_id: row.unit_id,  // 单位ID
        unit_title: row.unit_title,  // 单位ID
        quantity: row.quantity, // 数量两位小数
        max_quantity: row.max_quantity,
        is_sn: row.is_sn,
        sn: row.sn,
        unit_price: row.unit_price,
        remark: row.remark,
      }
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .t-form__controls {
  min-height: 0;
}

/deep/ .t-form__controls-content {
  min-height: 0;
}

/deep/ .dialog {

  .t-dialog--default {
    padding: 0;

    .t-dialog__body {
      padding: 0;
    }
  }
}

.dialog-body {
  display: flex;
}

.form-label2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  color: #000000E5;
}

.label-hint {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  padding-left: 8px;
  padding-right: 8px;
  color: var(--td-font-gray-2);
}

/deep/ .t-dialog__body {
  margin: 0 !important;
}

/deep/ .dialog-body {

  .t-input.t-size-l {
    min-height: 40px !important;
  }

  .t-input-number.t-size-l .t-input {
    font-size: 17px;
    min-height: 40px;
  }

  .t-input {
    //background-color: #FFFFFF !important;
  }

}


/deep/ .left {
  position: relative;
  width: 890px;
  padding: 32px 24px;
  padding-bottom: 24px;
  box-sizing: border-box;


  .drawer-head {
    color: black;
  }

  .product-info {
    padding: 12px;
    margin-top: 12px;
    margin-bottom: 24px;
    background-color: #F9F9F9;
    border-radius: var(--td-radius-medium);

    h3 {
      font-size: 16px;
      font-weight: 600;
      line-height: 22.4px;
      text-align: left;
      color: #000000;
    }

    p {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: rgba(0,0,0,0.4);
    }
  }
}


.footer-btn {
  width: 100%;
  display: flex;
  padding-top: 24px;
  align-items: center;
  justify-content: space-between;
}

.danger-btn {
  width: 112px;
  height: 40px;
  border-radius: var(--td-radius-medium);
}

.confirm-btn {
  width: 82px;
  height: 42px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}

.cancel-btn {
  width: 82px;
  height: 42px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  background-color: #B8B8B8;
  border-radius: var(--td-radius-medium);
}

.cancel-btn2 {
  width: 82px;
  height: 42px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}
</style>
